<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="xsl">
        <script src="jquery-3.1.1.js"></script>
        <title></title>
        <style>
      	body {
			/*12号文字，1.5倍行高， Tahoma无衬线字体*/
            font: 12px/1.5 Tahoma;
        }
		#outer{
			width: 400px;
			margin: 0 auto;
			font-size: 14px;
		}
		#tab{
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: black;
			border: 1px solid #000;
		}
		#tab li{
			float: left;
			color: white;
			width: 80px;
			height: 30px;
			list-style: none;
			line-height: 30px;
			text-align: center;
			cursor: pointer;
		}
		#tab li.current{
			background-color: lightgray;
			color: black;
		}
		#content{
			border: 1px solid #000;
			border-top: none;
		}
		#content ul{
			margin: 0 30px;
			padding: 10px 0;
			line-height: 200%;
			display: none;
            margin-left: 190px;
		}
		#content .active{
			display: block;
		}
	</style>
</head>
<body>
	<div id="outer">
		<ul id="tab">
			<li class="current">第一节</li>
			<li>第二节</li>
			<li>第三节</li>
		</ul>
		<div id="content">
			<ul class="active">
				<li>内容1</li>
				<li>内容2</li>
				<li>内容3</li>
			</ul>
			<ul>
				<li>内容1</li>
				<li>内容2</li>
				<li>内容3</li>
				<li>内容4</li>
			</ul>
			<ul>
				<li>内容1</li>
				<li>内容2</li>
			</ul>
		</div>
	</div>
</html>
<script>
    $('#tab li').mouseover(function(){
        $(this).addClass('current').siblings().removeClass('current');
        $('#content ul').eq($(this).index()).addClass('active').siblings().removeClass('active');
        // console.log($(this).index())
    })
</script>